<template>
  <div class="view">
    <x-header :left-options="{backText: ''}"
              class="vux-1px-b">商家入驻</x-header>
    <step v-model="step"
          background-color='#f7f7f7'>
      <step-item title="商家信息"
                 class="step-item"></step-item>
      <step-item title="店铺信息"
                 class="step-item"></step-item>
      <step-item v-if="!issellertype"
                 title="企业信息"
                 class="step-item"></step-item>
      <step-item v-if="issellertype"
                 title="个人信息"
                 class="step-item"></step-item>
    </step>
    <!-- 正常商户入驻填写信息 -->
    <div class="content"
         v-if="!issellertype">
      <div class="tooltip margin-bottom"
           v-if="form.seller_status===-1">
        <h3>拒绝原因</h3>
        <p>{{form.seller_status_desc || '无'}}</p>
      </div>
      <group title="企业信息"
             class="margin-bottom">
        <x-input title="企业名称"
                 placeholder="请输入企业名称"
                 v-model="form.seller_name"
                 :max="30"
                 placeholder-align="right"
                 text-align="right"></x-input>
        <popup-picker title="企业分类"
                      placeholder="请选择企业分类"
                      :columns="1"
                      :data="typeData"
                      v-model="form.seller_type_idVal"
                      @on-change="onSellerTypeChange"
                      show-name></popup-picker>
        <popup-picker title="企业所在地"
                      placeholder="请选择企业所在地"
                      :columns="3"
                      :data="regionData"
                      v-model="form.region_idVal"
                      @on-change="onAreaChange"
                      show-name></popup-picker>
        <x-input title="企业详细地址"
                 placeholder="请输入企业详细地址"
                 :max="50"
                 v-model="form.seller_address"
                 placeholder-align="right"
                 text-align="right"></x-input>
        <x-textarea title="企业经营范围"
                    placeholder="请输入企业经营范围"
                    v-model="form.empirical_range"
                    :max="200"></x-textarea>
      </group>

      <group title="执照信息"
             class="margin-bottom">
        <cell title="营业执照图片（限制照片小于10MB）"
              :primary="'content'">
          <uploader :images="licenseImgData"
                    :handle-click="false"
                    :show-header="false"
                    :show-tip="false"
                    :autoUpload="true"
                    :uploadUrl="'/UploadFile/Upload'"
                    :autoRemove="true"
                    :removeUrl="'/UploadFile/Remove'"></uploader>
        </cell>
        <x-input title="统一社会信用代码"
                 placeholder="请输入统一社会信用代码"
                 v-model="form.licence_number"
                 :max="30"
                 placeholder-align="right"
                 text-align="right"></x-input>
        <datetime title="成立日期"
                  placeholder="请选择企业成立日期"
                  v-model="form.business_license_start"
                  :min-year="1949"
                  ::max-year="currentYear"></datetime>
        <popup-radio title="营业期限"
                     placeholder="请选择营业期限"
                     :options="longtimeData"
                     v-model="form.is_longtime">
          <p slot="popup-header"
             class="vux-1px-b title-slot">请选择营业期限</p>
        </popup-radio>
        <datetime title="营业开始日期"
                  placeholder="请选择营业开始日期"
                  v-model="form.business_license_start"
                  v-if="showBusinessEnddate"
                  :min-year="1949"
                  :max-year="2050"></datetime>
        <datetime title="营业结束日期"
                  placeholder="请选择营业结束日期"
                  v-model="form.business_license_end"
                  v-if="showBusinessEnddate"
                  :min-year="1949"
                  :max-year="2050"></datetime>
      </group>
    </div>
    <!-- 个人商户入驻填写信息 -->
    <div class="content"
         v-if="issellertype">
      <div class="tooltip margin-bottom"
           v-if="form.seller_status===-1">
        <h3>拒绝原因</h3>
        <p>{{form.seller_status_desc || '无'}}</p>
      </div>
      <group title="个人信息"
             class="margin-bottom">
        <x-input title="个人姓名"
                 placeholder="请输入个人姓名"
                 v-model="form.seller_name"
                 :max="30"
                 placeholder-align="right"
                 text-align="right"></x-input>
        <popup-picker title="商户分类"
                      placeholder="请选择商户分类"
                      :columns="1"
                      :data="typeData"
                      v-model="form.seller_type_idVal"
                      @on-change="onSellerTypeChange"
                      show-name></popup-picker>
        <popup-picker title="经营所在地"
                      placeholder="请选择经营所在地"
                      :columns="3"
                      :data="regionData"
                      v-model="form.region_idVal"
                      @on-change="onAreaChange"
                      show-name></popup-picker>
        <x-input title="经营详细地址"
                 placeholder="请输入经营详细地址"
                 :max="50"
                 v-model="form.seller_address"
                 placeholder-align="right"
                 text-align="right"></x-input>
        <x-textarea title="经营范围"
                    placeholder="请输入经营范围"
                    v-model="form.empirical_range"
                    :max="200"></x-textarea>
      </group>

      <group title="个人身份证信息"
             class="margin-bottom">
        <cell title="个人身份证图片（限制照片小于10MB）"
              :primary="'content'">
          <uploader :images="licenseImgData"
                    :handle-click="false"
                    :show-header="false"
                    :show-tip="false"
                    :autoUpload="true"
                    :uploadUrl="'/UploadFile/Upload'"
                    :autoRemove="true"
                    :removeUrl="'/UploadFile/Remove'"></uploader>
        </cell>
        <x-input title="个人身份证号码"
                 placeholder="请输入个人身份证号码"
                 v-model="form.licence_number"
                 :max="30"
                 placeholder-align="right"
                 text-align="right"></x-input>
        <datetime title="个人身份证有效开始时间"
                  placeholder="请选择身份证有效开始时间"
                  v-model="form.business_license_start"
                  :min-year="1949"
                  ::max-year="currentYear"></datetime>
        <popup-radio title="个人身份证有效期限"
                     placeholder="请选择身份证有效期限"
                     :options="longtimeData"
                     v-model="form.is_longtime">
          <p slot="popup-header"
             class="vux-1px-b title-slot">请选择营业期限</p>
        </popup-radio>
        <datetime title="身份证有效开始日期"
                  placeholder="请选择身份证有效开始日期"
                  v-model="form.business_license_start"
                  v-if="showBusinessEnddate"
                  :min-year="1949"
                  :max-year="2050"></datetime>
        <datetime title="身份证有效结束日期"
                  placeholder="请选择身份证有效结束日期"
                  v-model="form.business_license_end"
                  v-if="showBusinessEnddate"
                  :min-year="1949"
                  :max-year="2050"></datetime>
      </group>
    </div>

    <fixed-bot-btn @click="nextClick"
                   :backColor="'rgba(86, 183, 91, 1)'">提交</fixed-bot-btn>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
import { SET_LOADING } from '@store/type'
import { Datetime, Group, PopupPicker, XInput, XTextarea, XButton, Step, StepItem, Cell, PopupRadio, XHeader } from 'vux'
import Uploader from '@comps/uploader/uploader'
import fixedBotBtn from '@comps/fixedBotBtn'
import { getSellerTypeList, sellerRegister } from '@api'
import qs from 'qs'

export default {
  components: {
    XHeader,
    Step,
    StepItem,
    Datetime,
    Group,
    PopupPicker,
    XInput,
    XTextarea,
    XButton,
    Uploader,
    Cell,
    PopupRadio,
    fixedBotBtn
  },
  data () {
    return {
      step: 2,
      form: {},
      showBusinessEnddate: false,
      longtimeData: [
        { key: 0, value: '非长期' },
        { key: 1, value: '长期' }
      ],
      licenseImgData: [],
      typeData: [],
      regionData: [],
      currentYear: new Date().getFullYear(),
      issellertype: false
    }
  },
  computed: {
    ...mapState(['token', 'user'])
  },
  methods: {
    ...mapMutations({
      setLoading: SET_LOADING
    }),
    // 加载入驻申请表单
    loadForm () {
      let jsonStr = sessionStorage.getItem('sellerRegisterForm')
      this.form = JSON.parse(jsonStr)
      if (this.form.business_license_img && this.form.business_license_img.length > 0) {
        this.licenseImgData.slice(0, this.licenseImgData.length)
        this.licenseImgData.push({ url: this.form.business_license_img })
      }

      if (this.form.is_longtime === 0) {
        this.showBusinessEnddate = true
      }
    },
    // 加载省市区
    loadRegions () {
      let regions = localStorage.getItem('regions')
      if (regions) {
        this.regionData = JSON.parse(regions)
      }
    },
    // 商家类型切换
    onSellerTypeChange (val) {
      if (val && val.length > 0) {
        this.form.seller_type_id = val[val.length - 1]
        // 判断选择的商家类型是否为个人商户
        for (let i = 0; i < this.typeData.length; i++) {
          if (val[val.length - 1] === this.typeData[i].value) {
            if (this.typeData[i].name === '个人商户') {
              this.issellertype = true
            } else {
              this.issellertype = false
            }
          }
        }
      }
    },
    // 地区切换
    onAreaChange (val) {
      if (val && val.length > 0) {
        this.form.region_id = val[val.length - 1]
      }
    },
    // 验证
    isValid () {
      if (!this.form.seller_name || this.form.seller_name.length === 0) {
        if (this.issellertype) {
          this.$toastText('请先输入个人姓名！')
        } else {
          this.$toastText('请先输入企业名称！')
        }
        return false
      }
      if (!this.form.seller_type_idVal || this.form.seller_type_idVal.length === 0) {
        if (this.issellertype) {
          this.$toastText('请先选择商户分类！')
        } else {
          this.$toastText('请先选择企业分类！')
        }
        return false
      }
      if (!this.form.region_idVal || this.form.region_idVal.length === 0) {
        if (this.issellertype) {
          this.$toastText('请先选择经营所在地！')
        } else {
          this.$toastText('请先选择企业所在地！')
        }
        return false
      }
      if (!this.form.seller_address || this.form.seller_address.length === 0) {
        if (this.issellertype) {
          this.$toastText('请先输入经营详细地址！')
        } else {
          this.$toastText('请先输入企业详细地址！')
        }
        return false
      }

      if (!this.form.licence_number || this.form.licence_number.length === 0) {
        if (this.issellertype) {
          return true
        } else {
          this.$toastText('请先输入统一社会信用代码！')
          return false
        }
      }
      let reg = /^(?:(?![IOZSV])[\dA-Z]){2}\d{6}(?:(?![IOZSV])[\dA-Z]){10}$/
      if (!reg.test(this.form.licence_number)) {
        if (this.issellertype) {
          return true
        } else {
          this.$toastText('请先输入正确的营业执照代码！')
          return false
        }
      }
      if (!this.form.business_license_img || this.form.business_license_img.length === 0) {
        if (this.issellertype) {
          this.$toastText('请先上传个人身份证照片！')
        } else {
          this.$toastText('请先上传营业执照照片！')
        }
        return false
      }
      if (this.form.business_license_start.length === 0) {
        if (this.issellertype) {
          return true
        } else {
          this.$toastText('请先选择企业成立日期！')
          return false
        }
      }
      if (!this.form.is_longtime) {
        if (this.issellertype) {
          return true
        } else {
          this.$toastText('请先选择企业营业期限！')
          return false
        }
      }

      if (this.form.is_longtime === 0 && this.form.business_license_end.length === 0) {
        if (this.issellertype) {
          return true
        } else {
          this.$toastText('请先选择营业执照失效日期！')
          return false
        }
      }
      return true
    },
    // 下一步
    async nextClick () {
      if (this.licenseImgData.length >= 1) {
        this.form.business_license_img = this.licenseImgData[0].url
      }
      if (this.isValid()) {
        this.setLoading({
          status: true,
          opacity: 0
        })
        let res = await sellerRegister(qs.stringify(this.form))
        this.setLoading(false)
        if (res && res.code === 200) {
          this.$router.push('/sellerRegisterStep' + (this.step + 1))
        }
      }
    },
    // 加载商家类型
    async loadSellerTypes () {
      let res = await getSellerTypeList()
      if (res && res.code === 200) {
        this.typeData = res.data
      }
    }
  },
  created () {
    this.loadForm()
    this.loadSellerTypes()
    this.loadRegions()
  },
  watch: {
    'form.is_longtime': function (val) {
      if (val === 0) {
        this.showBusinessEnddate = true
      } else {
        this.showBusinessEnddate = false
        this.form.business_license_end = null
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/css/pub";

.content {
  padding-top: $default_toolbar_height;
  height: calc(
    100% - #{$default_navbar_height} - #{$default_buytoolbar_height}
  );
}

.title-slot {
  text-align: center;
  padding: .2rem 0;
  color: $default_title_color;
}

.tooltip {
  padding: .25rem;
  margin: .25rem;
  color: #df9d35;
  background: #fffbe6;
  p {
    margin-top: .125rem;
    width: 100%;
    height: auto;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
  }
}

.footer {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  box-shadow: -.02375rem -.07125rem .16125rem .00125rem rgba(8, 1, 3, 0.27);
  border: 0;
}
</style>

<style lang="scss">
@import "../../assets/css/pub";
.vux-step {
  position: fixed;
  top: $default_navbar_height;
  left: 0;
  padding: .375rem;
  width: 100%;
  height: $default_buytoolbar_height;
  background-color: $default_background_color;
  z-index: 9;
}
.vux-step-item-title {
  font-size: $default_font_size !important;
}
.weui-cells:before {
  z-index: 1;
}
.weui-textarea {
  text-align: right;
}
.vux-step-item-icon {
  width: auto !important;
}
</style>
